<template>
    <a-form ref="formRef" @finish="handleFinish" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">

        <a-row>
            <a-col :span="12">
                <a-form-item label="变更名称" name="name" :rules="[{ required: true }]">
                    <a-input :disabled="disabled" v-model:value="form.name" style="width: 100%" />
                    <!-- <a-input :disabled="disabled" v-model:value="form.name" style="width: 100%" /> -->
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目名称" name="proName" :rules="[{ required: true }]">
                    <a-input-search :disabled="disabled" v-model:value="form.proName" style="width: 100%"
                        placeholder="选择的项目" @click="onSearch" @search="onSearch" />

                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="12">
                <a-form-item label="申请单位" name="company" :rules="[{ required: true }]">
                    <a-input :disabled="disabled" v-model:value="form.company" style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="申请人" name="applicant" :rules="[{ required: true }]">
                    <a-input :disabled="disabled" v-model:value="form.applicant" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="变更原因" name="cause">
                    <a-input :disabled="disabled" v-model:value="form.cause" style="width: 100%" />
                </a-form-item>
            </a-col>

            <a-col :span="12">
                <a-form-item label="责任方" name="charge">
                    <a-input :disabled="disabled" v-model:value="form.charge" style="width: 100%" />
                </a-form-item>
            </a-col>

        </a-row>
        <a-row>
            <a-col :span="24">
                <a-form-item label="描述" name="desc" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    <a-textarea :disabled="disabled" v-model:value="form.desc" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="设计调整开始时间" name="designStartTime">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled"
                        v-model:value="form.designStartTime" style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="设计调整完成时间" name="designEndTime">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled"
                        v-model:value="form.designEndTime" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="施工调整开始时间" name="workStartTime">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled"
                        v-model:value="form.workStartTime" style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="施工调整完成时间" name="workEndTime">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled"
                        v-model:value="form.workEndTime" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="变更日期" name="startTime">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled" v-model:value="form.startTime"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="变更完成时间" name="endTime">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled" v-model:value="form.endTime"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="施工费用" name="workCost">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.workCost"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="设计费用" name="designCost">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.designCost"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="其他费用" name="totalCost">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.totalCost"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="总申请金额" name="amount">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.amount"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="业主审批变更金额" name="changeCost">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.changeCost"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="记录人" name="recorder">
                    <a-input :disabled="disabled" v-model:value="form.recorder" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="确认凭证" name="contractReviewDraft">
                    <fileUpload @uploadDone="uploadDone" :isShow="disabled" :files="form.files" ref="uploadRef1"
                        :type="1" :uploadNumber="4"></fileUpload>
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-form-item label="备注" name="remark" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                    <a-textarea :disabled="disabled" v-model:value="form.remark" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <system :value="form"></system>
        <projectSelection ref="proSelect" @onClose="prSelectOk" :value="form.proSelectRecords" />
    </a-form>
</template>

<script setup>
import system from '@/components/Task/system.vue'
import fileUpload from '@/components/JqUpload/index.vue'
import api from '@/api/contract/negotiations/index'
import projectSelection from '@/components/pm/projectSelection.vue'
const form = ref({
})
const formRef = ref()
const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    }
})
watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }
        }
    },
    { deep: true, immediate: true }
)

const uploadDone = (result) => {
    console.log("uploadDone1", result)
    form.value.files = result
}
const submit = () => {
    formRef.value.validate().then(() => {
        handleFinish(form.value)
    }).catch((err) => {

    });
}
const handleFinish = (values) => {
    console.log("handleFinish", values);
    if (!form.value.id) {
        api.add(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        api.edit(values).then(() => {
            onClose(true);
        })
    }
};
const reset = () => {
    form.value = {}
}
const show = (record) => {
    form.value = { ...record }
}

const emits = defineEmits(['OnClose'])
const onClose = (refresh) => {
    emits('OnClose', refresh)
};

const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("项目选择ok ", selectedRowKeys, selectRecords)
    form.value.proId = selectRecords[0].id
    form.value.proName = selectRecords[0].name
    form.value.proSelectRecords = selectRecords;
}

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            form.value.flowCode = "FLW_CONTRACT_CHANGE"
            form.value.subType = 1
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
// 重置
const resetForm = () => {
    formRef.value.resetFields()
}
defineExpose({
    getData,
    resetForm,
    show
})
</script>
